<template>
	<view class="uni-popup-dialog">
		<view class="uni-dialog-title">
			<text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">{{ title }}</text>
		</view>
		<view class="uni-dialog-content">
			<text class="uni-dialog-content-text" v-if="mode === 'base'">{{ content }}</text>
			<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" />
		</view>
		<view class="uni-dialog-button-group">
			<view class="uni-dialog-button" @click="close"><text class="uni-dialog-button-text">取消</text></view>
			<view class="uni-dialog-button uni-border-left" @click="onOk"><text class="uni-dialog-button-text uni-button-color">确定</text></view>
		</view>
	</view>
</template>

<script>
/**
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} mode = [base|input] 模式、
 * 	@value base 基础对话框
 * 	@value input 可输入对话框
 * @property {String} content 对话框内容
 * @property {Boolean} beforeClose 是否拦截取消事件
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */

export default {
	name: 'uniPopupDialog',
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		placeholder: {
			type: [String, Number],
			default: '请输入内容'
		},
		/**
		 * 对话框主题 success/warning/info/error	  默认 success
		 */
		type: {
			type: String,
			default: 'error'
		},
		/**
		 * 对话框模式 base/input
		 */
		mode: {
			type: String,
			default: 'base'
		},
		/**
		 * 对话框标题
		 */
		title: {
			type: String,
			default: '提示'
		},
		/**
		 * 对话框内容
		 */
		content: {
			type: String,
			default: ''
		},
		/**
		 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
		 */
		beforeClose: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			dialogType: 'error',
			focus: false,
			val: ''
		};
	},
	inject: ['popup'],
	watch: {
		type(val) {
			this.dialogType = val;
		},
		mode(val) {
			if (val === 'input') {
				this.dialogType = 'info';
			}
		},
		value(val) {
			this.val = val;
		}
	},
	created() {
		// 对话框遮罩不可点击
		this.popup.mkclick = false;
		if (this.mode === 'input') {
			this.dialogType = 'info';
			this.val = this.value;
		} else {
			this.dialogType = this.type;
		}
	},
	mounted() {
		this.focus = true;
	},
	methods: {
		/**
		 * 点击确认按钮
		 */
		onOk() {
			this.$emit(
				'confirm',
				() => {
					this.popup.close();
					if (this.mode === 'input') this.val = this.value;
				},
				this.mode === 'input' ? this.val : ''
			);
		},
		/**
		 * 点击取消按钮
		 */
		close() {
			if (this.beforeClose) {
				this.$emit('close', () => {
					this.popup.close();
				});
				return;
			}
			this.popup.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-popup-dialog {
	width: 300px;
	border-radius: 15px;
	background-color: #fff;
}

.uni-dialog-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 5px;
}

.uni-dialog-title-text {
	font-size: 16px;
	font-weight: 500;
}

.uni-dialog-content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 5px 15px 15px 15px;
}

.uni-dialog-content-text {
	font-size: 14px;
	color: #6e6e6e;
}

.uni-dialog-button-group {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	border-top-color: #f5f5f5;
	border-top-style: solid;
	border-top-width: 1px;
}

.uni-dialog-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */

	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 45px;
}

.uni-border-left {
	border-left-color: #f0f0f0;
	border-left-style: solid;
	border-left-width: 1px;
}

.uni-dialog-button-text {
	font-size: 14px;
}

.uni-button-color {
	color: $uni-color-primary;
}

.uni-dialog-input {
	flex: 1;
	font-size: 14px;
}

.uni-popup__success {
	color: $uni-color-success;
}

.uni-popup__warn {
	color: $uni-color-warning;
}

.uni-popup__error {
	color: $uni-color-error;
}

.uni-popup__info {
	color: #909399;
}
</style>
